<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<table border="1">
    <caption>个人信息页面</caption>
    <tr>
        <td>名字:</td>
        <td>{{person.name}}</td>
        <td>{{pn.name}}</td>
    </tr>
    <tr>
        <td>照片:</td>
        <td><img :src="person.url" width="90px" alt=""> </td>
        <td><img :src="person.url" width="90px" alt=""> </td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td>{{person.age}}岁</td>
        <td>{{pn.age}}岁</td>
    </tr>
    <tr>
        <td>好友:</td>
        <td>
            <ul>
                <li v-for="name in person.friend">{{name}}</li>
            </ul>
        </td>
        <td>
            <ul>
                <li v-for="name in pn.friend">{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>工作:</td>
        <td>{{person.job}}</td>
        <td>{{pn.job}}</td>
    </tr>
    <tr>
        <td colspan="3" align="center"><input type="button" value="加载数据" @click="f()"></td>
    </tr>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        let v = new Vue({
            el:"table",
            data:{
                person:{},
                pn:{}
            },
            methods:{
                f:function () {
                    v.person = {
                        name:"貂蝉",
                        age:16,
                        url:"01.jpg",
                        job:"法师",
                        friend:["蔡文姬","亚瑟","狄仁杰"]
                    }
                    v.pn={
                        name:"张三",
                        age:20,
                        url:"01.jpg",
                        job:"法外狂徒",
                        friend:["李四","王五","罗翔"]
                    }
                }
            }
        })
    </script>

</table>
</body>
</html>